<template>
  <div style="
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      position: relative;
    ">
    <!-- <div  v-if="tableData.length > 0" style="position: absolute;bottom: 0;border: 1px solid;width:54%;height:4%;right: 0.35%; border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;border-top: none;"></div> -->
    <div v-if="main_active == 0" style="
        background: rgba(24, 43, 83, 0.15);
        color: white;
        width: 100%;
        display: flex;
        align-items: center;
        height: 10%;
        box-sizing: border-box;
        text-align: center;
      ">
      <p style="width: 5%">序号</p>
      <p style="width: 13.5%">清单名称</p>
      <p style="width: 13.5%">规格</p>
      <p style="width: 13.5%">单位</p>
      <p style="width: 13.5%">{{ headerlist[0] }}</p>
      <p style="width: 13.5%">{{ headerlist[1] }}</p>
      <p style="width: 13.5%">{{ headerlist[2] }}</p>
      <p style="width: 13.5%">{{ headerlist[3] }}</p>
      <p style="width: 13.5%" v-if="main_active != 0">操作</p>
    </div>
    <div v-if="main_active == 1 || main_active == 2" style="
        background: rgba(24, 43, 83, 0.15);
        color: white;
        width: 100%;
        display: flex;
        align-items: center;
        height: 10%;
        box-sizing: border-box;
        text-align: center;
      ">
      <p style="width: 5%">序号</p>
      <p style="width: 10.5%">清单名称</p>
      <p style="width: 11.5%" v-if="main_active == 1">工种分类</p>
      <p style="width: 11.5%" v-if="main_active == 2">专业分包分类</p>
      <p style="width: 11.5%">工程名称</p>
      <p style="width: 11.5%">中标单位</p>
      <p style="width: 11.5%">中标总价</p>
      <p style="width: 9%"> {{ this.isactive == 1 ? '最新浮动价' : this.isactive == 2 ? '最新费率价' : '最新价' }}</p>
      <p style="width: 6%">单位</p>
      <p style="width: 10%">规格</p>
      <p style="width: 13%">项目地点</p>
      <p style="width: 5.5%" v-if="main_active != 0">操作</p>
    </div>
    <div v-if="main_active == 3" style="
        background: rgba(24, 43, 83, 0.15);
        color: white;
        width: 100%;
        display: flex;
        align-items: center;
        height: 10%;
        box-sizing: border-box;
        text-align: center;
      ">
      <p style="width: 5%">序号</p>
      <p style="width: 10.5%">清单名称</p>
      <p style="width: 10.5%">机械租赁分类</p>
      <p style="width: 17%">工程名称</p>
      <p style="width: 16.5%">中标单位</p>
      <p style="width: 13.5%">项目地点</p>
      <p style="width: 7%">租赁方式</p>
      <p style="width: 9%">{{ this.isactive == 1 ? '最新浮动价' : this.isactive == 2 ? '最新费率价' : '最新价' }}</p>
      <p style="width: 5%">单位</p>
      <p style="width: 6%">规格</p>
      <p style="width: 9.5%">中标总价</p>
      <p style="width: 5.5%">操作</p>
    </div>
    <div class="mevaluatimiddle1" v-if="isLoading" style="
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      ">
      <dv-loading>Loading...</dv-loading>
    </div>
    <div style="height: 90%" v-else-if="tableData.length > 0">
      <div v-if="main_active == 0" class="cellstyle" v-for="(item, index) in tableData" :key="index"
        :class="index % 2 != 0 ? 'cellstyleeven' : ''">
        <p style="width: 5%">{{ (currentPage - 1) * 10 + index + 1 }}</p>
        <p style="width: 13.5%" class="textchuli" :title="item.materialname">
          {{ item.materialname }}
        </p>
        <p style="width: 13.5%" class="textchuli" :title="item.specification">
          {{ item.specification }}
        </p>
        <p style="width: 13.5%" class="textchuli">
          {{ item.unit }}
        </p>

        <p style="
            width: 13.5%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          " class="textchuli look cu_p" @click="showhtqlc(1, item)">
          {{ item.newunitprice }}
        </p>

        <p style="width: 13.5%" class="textchuli look cu_p" @click="showhtqlc(2, item)">
          {{ item.minunitprice }}
        </p>
        <p style="width: 13.5%" class="textchuli look cu_p" @click="showhtqlc(3, item)">
          {{ item.maxunitprice }}
        </p>

        <p style="
            width: 13.5%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          " class="textchuli">
          {{ item.avgunitprice }}
        </p>
        <p style="width: 13.5%" class="textchuli" @click="showhtqlc(1, item)" v-if="main_active != 0">
          <span class="look cu_p">查看</span>
        </p>
      </div>
      <div v-if="main_active == 1 || main_active == 2" class="cellstyle" v-for="(item, index) in tableData" :key="index"
        :class="index % 2 != 0 ? 'cellstyleeven' : ''">
        <p style="width: 5%">{{ (currentPage - 1) * 10 + index + 1 }}</p>
        <p style="width: 10.5%" class="textchuli" :title="item.materialname">
          {{ item.materialname }}
        </p>
        <p style="width: 11.5%" class="textchuli" :title="item.materialclassname">
          {{ item.materialclassname }}
        </p>
        <p style="width: 11.5%" class="textchuli" :title="item.projectname">
          {{ item.projectname }}
        </p>

        <p style="width: 11.5%" class="textchuli" :title="item.suppliername">
          {{ item.suppliername }}
        </p>

        <p style="width: 11.5%" class="textchuli">
          {{ item.sumprice }}
        </p>


        <p style="width: 9%" class="textchuli">
          {{ item.newunitprice }}
        </p>
        <p style="width: 6%" class="textchuli">
          {{ item.unit }}
        </p>
        <p style="width: 10%" class="textchuli" :title="item.specification">
          {{ item.specification }}
        </p>
        <p style="width: 13%" class="textchuli" :title="item.areatext">
          {{ item.areatext }}
        </p>

        <p style="width: 5.5%" class="textchuli" @click="otherDataTracePriceCollect(item)" v-if="main_active != 0">
          <span class="look cu_p">查看</span>
        </p>
      </div>
      <div v-if="main_active == 3" class="cellstyle" v-for="(item, index) in tableData" :key="index"
        :class="index % 2 != 0 ? 'cellstyleeven' : ''">
        <p style="width: 5%">{{ (currentPage - 1) * 10 + index + 1 }}</p>
        <p style="width: 10.5%" class="textchuli" :title="item.materialname">
          {{ item.materialname }}
        </p>
        <p style="width: 10.5%" class="textchuli" :title="item.thirdclsname">
          {{ item.thirdclsname }}
        </p>
        <p style="width: 17%" class="textchuli" :title="item.projectname">
          {{ item.projectname }}
        </p>
        <p style="width: 16.5%" class="textchuli" :title="item.suppliername">
          {{ item.suppliername }}
        </p>
        <p style="width: 13.5%" class="textchuli" :title="item.areatext">
          {{ item.areatext }}
        </p>
        <p style="width: 7%" class="textchuli">
          {{ getLeaseType(item.leasetype) }}
        </p>
        <p style="width: 9%" class="textchuli">
          {{ item.newunitprice }}
        </p>
        <p style="width: 5%" class="textchuli">
          {{ item.unit }}
        </p>
        <p style="width: 6%" class="textchuli" :title="item.specification">
          {{ item.specification }}
        </p>
        <p style="width: 9.5%" class="textchuli">
          {{ item.sumprice }}
        </p>

        <p style="width: 5.5%" class="textchuli" @click="otherDataTracePriceCollect(item)" v-if="main_active != 0">
          <span class="look cu_p">查看</span>
        </p>
      </div>

    </div>
    <div style="
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      " v-else>
      暂无数据
    </div>
    <Dialogback :modalVisible="showjgzzhtqlc" :title="title">
      <template>
        <div style="width: 98%; height: 97%; margin: 0 auto; display: flex">
          <Szjjdjlbdialog :code="dianjiliebiaocode" :id="dianjiliebiaoid" :obj="rowobj" :tendercode="tendercodelast" />
        </div>
      </template>
    </Dialogback>
  </div>
</template>

<script>
import APIS from "@/api/index";
import Dialogback from "@/components/dialogback.vue";
import Szjjdjlbdialog from "@/components/szjjdjlbdialog.vue";
export default {
  props: {
    tableData: Array,
    currentPage: Number,
    headerlist: Array,
    isactive: Number,
    main_active: Number,
    materialName:String,
    time: Array,
    isLoading: Boolean,
    areaCode: String,
    engineeringCategory: String

  },
  components: { Szjjdjlbdialog, Dialogback },
  data() {
    return {
      showjgzzhtqlc: false,
      dianjiliebiaocode: "", //合同编码
      dianjiliebiaoid: "", //tenderId
      rowobj: {}, //点击对象
      tendercodelast: "", //tenderCode
    };
  },
  computed: {
    title() {
      let str = '采购详情';
      if (this.main_active == 3) {
        str = '租赁详情';
      }
      return str;
    }
  },
  methods: {
    getLeaseType(val) {
      let str = '';
      switch (val) {
        case 'quantity':
          str = '工程量'
          break;
        case 'month':
          str = '月'
          break;
        case 'day':
          str = '天'
          break;

        default:
          break;
      }
      return str;
    },
    otherDataTracePriceCollect(item) {
      if (!item) {
        item = {
          "materialname": "热轧等边角钢（Q195）",
          "pricedate": "2024-05-08 14:23:41",
          "specification": "∠63*4mm",
          "materialid": "00cf5486c33bad4542d557d5610c3d90",
          "unit": "吨",
          "materialcode": "012101010032",
          "customdata": "{\"area\": \"西南区->重庆市->辖区->江北区\", \"payratio\": \"100\", \"areavalue\": \"\", \"settlement\": \"16\"}",
          "sumprice": "108570.0",
          "newunitprice": "4700.0",
          "newareaname": "西南区->重庆市->辖区->江北区",
          "sumplanquantity": "23.1",
          "maxunitprice": "4700.0",
          "minunitprice": "4700.0",
          "avgunitprice": "4700.0"
        }
      }
      let mcType, type;
      if (this.main_active == 1) {
        mcType = 4;
      }
      else if (this.main_active == 2) {
        mcType = 1;
      }
      else if (this.main_active == 3) {
        mcType = 3;
      }
      if (this.isactive == 0) {
        type = 1;
      }
      else if (this.isactive == 1) {
        type = 2;
      }
      else if (this.isactive == 2) {
        type = 3;
      }

      let data = {
        mcType,
        materialCode: item.materialcode,
        type,
        dataType: 1, // 1: 最新
        unit: item.unit,
        areaCode: this.areaCode,
        matCode: item.thirdclscode,
        supplierid: item.supplierid,
        projectname: item.projectname,
        areatext: item.areatext,
        specification:item.specification,
        projectCode: this.engineeringCategory,
        startDate: this.time[0] && new Date(this.time[0]).toJSON().split('T')[0],
        endDate: this.time[1] && new Date(this.time[1]).toJSON().split('T')[0],
        materialName:this.materialName
      };
      APIS.Jgzz.otherDataTracePriceCollect(data).then(res => {
        console.log('res:', res);
        this.rowobj = res.data;
        if (res.data?.pageCode?.indexOf(",")) {
          let arr = res.data.pageCode.split(",");
          this.dianjiliebiaocode = arr[arr.length - 1];
        } else {
          this.dianjiliebiaocode = res.data?.pageCode;
        }
        this.dianjiliebiaoid = res.data.tenderId;
        this.tendercodelast = res.data.tendercode;
        this.showjgzzhtqlc = true;
      })
    },
    showhtqlc(num, item) {
      if (!item) {
        item = {
          "materialname": "热轧等边角钢（Q195）",
          "pricedate": "2024-05-08 14:23:41",
          "specification": "∠63*4mm",
          "materialid": "00cf5486c33bad4542d557d5610c3d90",
          "unit": "吨",
          "materialcode": "012101010032",
          "customdata": "{\"area\": \"西南区->重庆市->辖区->江北区\", \"payratio\": \"100\", \"areavalue\": \"\", \"settlement\": \"16\"}",
          "sumprice": "108570.0",
          "newunitprice": "4700.0",
          "newareaname": "西南区->重庆市->辖区->江北区",
          "sumplanquantity": "23.1",
          "maxunitprice": "4700.0",
          "minunitprice": "4700.0",
          "avgunitprice": "4700.0"
        }
      }
      // 1:最新  2:最低   3:最高
      let data = {};
      console.log(this.time, 'this.time');

      data = {
        type: this.isactive + 1,
        dataType: num,
        unit: item.unit,
        specification: item.specification,
        materialCode: item.materialcode,
        areaCode: this.areaCode,
        startDate: this.time[0] && new Date(this.time[0]).toJSON().split('T')[0],
        endDate: this.time[1] && new Date(this.time[1]).toJSON().split('T')[0],
        materialName:this.materialName
      };
      if (item.materialcode === "012101010032") {
        data.type = 1
      }
      // dataTracePriceCollect
      APIS.Jgzz.dataTracePriceCollect(data).then((res) => {
        console.log(res, "res");
        this.rowobj = res.data;
        if (res.data?.pageCode?.indexOf(",")) {
          let arr = res.data.pageCode.split(",");
          this.dianjiliebiaocode = arr[arr.length - 1];
        } else {
          this.dianjiliebiaocode = res.data?.pageCode;
        }
        this.dianjiliebiaoid = res.data.tenderId;
        this.tendercodelast = res.data.tendercode;
        this.showjgzzhtqlc = true;
      });
    },
    closepopup() {
      this.showjgzzhtqlc = false;
    },
  },
  mounted() {
    console.log(this.time, 'time11111');

  },
};
</script>

<style scoped>
.cu_p {
  cursor: pointer;
}

.look {
  color: #0000FF;
}

.cellstyle {
  width: 100%;
  display: flex;
  align-items: center;
  height: 9.6%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cellstyleeven {
  background-color: #e4e8f2;
}

.textchuli {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
</style>
